<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理 - 南宁二中2025级37班</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary: #1e88e5;
            --secondary: #64b5f6;
            --accent1: #e53935;
            --accent2: #43a047;
            --accent3: #fdd835;
            --accent4: #8e24aa;
            --dark: #2d3436;
            --light: #f5f6fa;
        }
        
        body {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            color: var(--dark);
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }
        
        /* 导航栏样式 */
        header {
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent1), var(--accent2));
            background-size: 400% 400%;
            animation: gradientShift 10s ease infinite;
            color: white;
            padding: 1rem 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            font-size: 2rem;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 1.5rem;
            position: relative;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            padding: 0.5rem 1rem;
            border-radius: 30px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .nav-links a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        .nav-links a i {
            font-size: 1.1rem;
        }
        
        .user-actions {
            display: flex;
            gap: 1rem;
        }
        
        .btn-auth {
            padding: 0.6rem 1.2rem;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-login {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .btn-auth:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* 页面标题 */
        .page-header {
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
        }
        
        .page-header h1 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        .page-header p {
            font-size: 1.2rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* 工具栏样式 */
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1rem;
            background: white;
            padding: 1.5rem;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .search-box {
            display: flex;
            align-items: center;
            background: var(--light);
            border-radius: 50px;
            padding: 0.5rem 1rem;
            width: 300px;
        }
        
        .search-box input {
            border: none;
            background: transparent;
            padding: 0.5rem;
            width: 100%;
            font-size: 1rem;
            outline: none;
        }
        
        .search-box i {
            color: #666;
        }
        
        .toolbar-actions {
            display: flex;
            gap: 1rem;
        }
        
        .btn {
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-success {
            background: var(--accent2);
            color: white;
        }
        
        .btn-danger {
            background: var(--accent1);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 学生列表样式 */
        .students-container {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            margin-bottom: 2rem;
        }
        
        .students-header {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            padding: 1.5rem 2rem;
            background: var(--light);
            font-weight: 600;
            color: var(--dark);
            border-bottom: 1px solid #eee;
        }
        
        .student-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #f0f0f0;
            align-items: center;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .student-row:hover {
            background: #f9f9f9;
        }
        
        .student-row:last-child {
            border-bottom: none;
        }
        
        .student-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .student-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        .student-details h3 {
            margin-bottom: 0.3rem;
            font-size: 1.1rem;
        }
        
        .student-details p {
            color: #666;
            font-size: 0.9rem;
        }
        
        .student-score {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--primary);
            text-align: center;
        }
        
        .student-group {
            text-align: center;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            background: var(--light);
        }
        
        .student-actions {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .btn-small {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .btn-small-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-small-danger {
            background: var(--accent1);
            color: white;
        }
        
        .btn-small:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
        }
        
        /* 首字母筛选器 */
        .letter-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 2rem;
            background: white;
            padding: 1.5rem;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .letter-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--light);
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .letter-btn:hover, .letter-btn.active {
            background: var(--primary);
            color: white;
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        
        .modal.active {
            display: flex;
            animation: fadeIn 0.3s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.4s;
        }
        
        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 20px 20px 0 0;
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: white;
            transition: transform 0.3s;
        }
        
        .close-modal:hover {
            transform: rotate(90deg);
        }
        
        .modal-body {
            padding: 2rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .form-group input:focus, .form-group select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
        }
        
        .modal-footer {
            padding: 1.5rem 2rem;
            border-top: 1px solid #eee;
            text-align: center;
        }
        
        .btn-modal {
            padding: 1rem 2rem;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            width: 100%;
            font-size: 1.1rem;
        }
        
        .btn-modal-primary {
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
        }
        
        .btn-modal-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(30, 136, 229, 0.4);
        }
        
        /* 分数调整选项样式 */
        .score-options {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }
        
        .score-option {
            background: var(--light);
            border-radius: 10px;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .score-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .score-option.add {
            border-color: var(--accent2);
        }
        
        .score-option.subtract {
            border-color: var(--accent1);
        }
        
        .score-option.selected {
            background: var(--primary);
            color: white;
        }
        
        .score-value {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        .score-reason {
            font-size: 1rem;
        }
        
        .score-option.add .score-value {
            color: var(--accent2);
        }
        
        .score-option.subtract .score-value {
            color: var(--accent1);
        }
        
        .score-option.selected .score-value {
            color: white;
        }
        
        .student-summary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: var(--light);
            border-radius: 15px;
        }
        
        .current-score {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary);
        }
        
        .new-score {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--accent2);
        }
        
        .score-change {
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        .score-change.positive {
            color: var(--accent2);
        }
        
        .score-change.negative {
            color: var(--accent1);
        }
        
        /* 自定义分数输入 */
        .custom-score {
            margin-top: 2rem;
            padding: 1.5rem;
            background: var(--light);
            border-radius: 15px;
        }
        
        .custom-score-controls {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .custom-score-input {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .custom-score-input input {
            width: 80px;
            text-align: center;
            font-weight: bold;
        }
        
        .btn-score {
            padding: 0.8rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-score.add {
            background: var(--accent2);
            color: white;
        }
        
        .btn-score.subtract {
            background: var(--accent1);
            color: white;
        }
        
        .btn-score:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 页脚样式 */
        footer {
            background: linear-gradient(90deg, var(--dark), #3d3d3d);
            color: white;
            text-align: center;
            padding: 2.5rem 0;
            margin-top: 3rem;
            border-radius: 20px 20px 0 0;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .footer-section {
            flex: 1;
            min-width: 200px;
        }
        
        .footer-section h3 {
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .copyright {
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: #aaa;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .nav-links li {
                margin: 0.5rem;
            }
            
            .user-actions {
                margin-top: 1rem;
            }
            
            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-box {
                width: 100%;
            }
            
            .toolbar-actions {
                width: 100%;
                justify-content: center;
            }
            
            .students-header, .student-row {
                grid-template-columns: 1fr;
                gap: 1rem;
                text-align: center;
            }
            
            .student-info {
                justify-content: center;
            }
            
            .student-actions {
                flex-direction: column;
                align-items: center;
            }
            
            .score-options {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                flex-direction: column;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <i class="fas fa-school"></i>
                    <span>南宁二中2025级37班</span>
                </div>
                <ul class="nav-links">
                    <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="student_management.html" style="background-color: rgba(255, 255, 255, 0.3);"><i class="fas fa-user-graduate"></i> 学生管理</a></li>
                    <li><a href="group_management.html"><i class="fas fa-users"></i> 小组管理</a></li>
                    <li><a href="leaderboard.html"><i class="fas fa-trophy"></i> 排行榜</a></li>
                </ul>
                <div class="user-actions">
                    <button class="btn-auth btn-login" id="login-btn">
                        <i class="fas fa-sign-in-alt"></i> 教师登录
                    </button>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>学生管理</h1>
            <p>管理学生信息，进行加减分操作，查看学生详细情况</p>
        </div>
        
        <!-- 首字母筛选器 -->
        <div class="letter-filter">
            <button class="letter-btn active" data-letter="all">全部</button>
            <button class="letter-btn" data-letter="A">A</button>
            <button class="letter-btn" data-letter="B">B</button>
            <button class="letter-btn" data-letter="C">C</button>
            <button class="letter-btn" data-letter="D">D</button>
            <button class="letter-btn" data-letter="E">E</button>
            <button class="letter-btn" data-letter="F">F</button>
            <button class="letter-btn" data-letter="G">G</button>
            <button class="letter-btn" data-letter="H">H</button>
            <button class="letter-btn" data-letter="I">I</button>
            <button class="letter-btn" data-letter="J">J</button>
            <button class="letter-btn" data-letter="K">K</button>
            <button class="letter-btn" data-letter="L">L</button>
            <button class="letter-btn" data-letter="M">M</button>
            <button class="letter-btn" data-letter="N">N</button>
            <button class="letter-btn" data-letter="O">O</button>
            <button class="letter-btn" data-letter="P">P</button>
            <button class="letter-btn" data-letter="Q">Q</button>
            <button class="letter-btn" data-letter="R">R</button>
            <button class="letter-btn" data-letter="S">S</button>
            <button class="letter-btn" data-letter="T">T</button>
            <button class="letter-btn" data-letter="W">W</button>
            <button class="letter-btn" data-letter="X">X</button>
            <button class="letter-btn" data-letter="Y">Y</button>
            <button class="letter-btn" data-letter="Z">Z</button>
        </div>
        
        <!-- 工具栏 -->
        <div class="toolbar">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="search-input" placeholder="搜索学生姓名...">
            </div>
            <div class="toolbar-actions">
                <button class="btn btn-primary" id="add-student-btn">
                    <i class="fas fa-user-plus"></i> 添加学生
                </button>
                <button class="btn btn-success" id="manage-score-options-btn">
                    <i class="fas fa-cog"></i> 管理评分选项
                </button>
            </div>
        </div>
        
        <!-- 学生列表 -->
        <div class="students-container">
            <div class="students-header">
                <div>学生信息</div>
                <div>分数</div>
                <div>小组</div>
                <div>操作</div>
            </div>
            
            <div id="students-list">
                <!-- 学生数据将通过JavaScript动态加载 -->
            </div>
        </div>
    </main>

    <!-- 学生详情模态框 -->
    <div class="modal" id="student-detail-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">学生详情</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="student-summary">
                    <div class="student-avatar" id="detail-avatar">李</div>
                    <div>
                        <h3 id="detail-name">李小明</h3>
                        <p id="detail-group">第一组</p>
                    </div>
                    <div class="current-score" id="detail-current-score">95</div>
                    <div class="score-change" id="detail-score-change">+0</div>
                    <div class="new-score" id="detail-new-score">95</div>
                </div>
                
                <h3 style="margin-bottom: 1rem;">选择评分选项</h3>
                <div class="score-options" id="score-options">
                    <!-- 评分选项将通过JavaScript动态加载 -->
                </div>
                
                <div class="custom-score">
                    <h4>自定义评分</h4>
                    <div class="custom-score-controls">
                        <div class="custom-score-input">
                            <button class="btn-score subtract" id="custom-subtract">
                                <i class="fas fa-minus"></i>
                            </button>
                            <input type="number" id="custom-score-value" value="5" min="1" max="100">
                            <button class="btn-score add" id="custom-add">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        <button class="btn btn-primary" id="apply-custom-score">应用自定义分数</button>
                    </div>
                </div>
                
                <div class="form-group" style="margin-top: 2rem;">
                    <label for="score-reason">原因说明</label>
                    <input type="text" id="score-reason" placeholder="请输入评分原因（可选）">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal btn-modal-primary" id="submit-score-change">确认评分</button>
            </div>
        </div>
    </div>

    <!-- 添加学生模态框 -->
    <div class="modal" id="add-student-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">添加学生</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="add-student-form">
                    <div class="form-group">
                        <label for="student-name">学生姓名</label>
                        <input type="text" id="student-name" placeholder="请输入学生姓名" required>
                    </div>
                    <div class="form-group">
                        <label for="student-group">所属小组</label>
                        <select id="student-group" required>
                            <option value="">请选择小组</option>
                            <!-- 小组选项将通过JavaScript动态加载 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="initial-score">初始分数</label>
                        <input type="number" id="initial-score" placeholder="请输入初始分数" value="100">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-modal btn-modal-primary" id="submit-add-student">添加学生</button>
            </div>
        </div>
    </div>

    <!-- 管理评分选项模态框 -->
    <div class="modal" id="manage-score-options-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">管理评分选项</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="toolbar" style="margin-bottom: 1.5rem;">
                    <button class="btn btn-primary" id="add-score-option-btn">
                        <i class="fas fa-plus"></i> 添加评分选项
                    </button>
                </div>
                
                <div id="score-options-list">
                    <!-- 评分选项列表将通过JavaScript动态加载 -->
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal btn-modal-primary" id="save-score-options">保存设置</button>
            </div>
        </div>
    </div>

    <!-- 添加评分选项模态框 -->
    <div class="modal" id="add-score-option-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">添加评分选项</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="add-score-option-form">
                    <div class="form-group">
                        <label for="option-type">评分类型</label>
                        <select id="option-type" required>
                            <option value="add">加分</option>
                            <option value="subtract">扣分</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="option-value">分数值</label>
                        <input type="number" id="option-value" placeholder="请输入分数值" required>
                    </div>
                    <div class="form-group">
                        <label for="option-reason">评分原因</label>
                        <input type="text" id="option-reason" placeholder="请输入评分原因" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-modal btn-modal-primary" id="submit-add-score-option">添加选项</button>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div class="modal" id="login-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">教师登录</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-username">用户名</label>
                        <input type="text" id="login-username" placeholder="请输入教师用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input type="password" id="login-password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-options">
                        <div class="remember-me">
                            <input type="checkbox" id="remember-me">
                            <label for="remember-me">记住我</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-modal btn-modal-primary" id="submit-login">登录</button>
                <div class="switch-form" style="margin-top: 1.5rem; text-align: center; color: #666;">
                    注意：只有教师账号可以登录进行操作
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>南宁二中2025级37班班级优化系统，致力于提升班级管理效率和学习积极性。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="student_management.html">学生管理</a></li>
                        <li><a href="group_management.html">小组管理</a></li>
                        <li><a href="leaderboard.html">排行榜</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>南宁市第二中学</p>
                    <p>2025级37班</p>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 南宁二中2025级37班 - 班级优化大师 | 所有权利保留</p>
            </div>
        </div>
    </footer>

    <script>
        // 修复URL解析问题 - 使用固定服务器地址
        const API_BASE_URL = 'http://localhost:5000';

        console.log('🌐 API基础URL:', API_BASE_URL);

        // 全局变量
        let students = [];
        let scoreOptions = [];
        let groups = [];
        let currentStudent = null;
        let selectedScoreOption = null;
        let customScoreValue = 5;
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', async function() {
            // 检查登录状态
            checkLoginStatus();
            
            // 绑定事件
            bindEvents();
            
            // 从后端加载数据
            await loadDataFromBackend();
        });
        
        // 从后端加载数据
        async function loadDataFromBackend() {
            try {
                showLoadingState();
                
                console.log('正在从后端加载数据...');
                
                // 测试后端连接
                const testResponse = await fetch(API_BASE_URL + '/health');
                if (!testResponse.ok) {
                    throw new Error('后端服务器未响应');
                }
                
                // 并行加载所有数据
                const [studentsResponse, scoreOptionsResponse, groupsResponse] = await Promise.all([
                    fetch(API_BASE_URL + '/api/students').catch(e => { throw new Error('学生数据加载失败: ' + e.message) }),
                    fetch(API_BASE_URL + '/api/score_options').catch(e => { throw new Error('评分选项加载失败: ' + e.message) }),
                    fetch(API_BASE_URL + '/api/groups').catch(e => { throw new Error('小组数据加载失败: ' + e.message) })
                ]);

                if (!studentsResponse.ok) throw new Error('学生数据响应错误: ' + studentsResponse.status);
                if (!scoreOptionsResponse.ok) throw new Error('评分选项响应错误: ' + scoreOptionsResponse.status);
                if (!groupsResponse.ok) throw new Error('小组数据响应错误: ' + groupsResponse.status);

                const studentsData = await studentsResponse.json();
                const scoreOptionsData = await scoreOptionsResponse.json();
                const groupsData = await groupsResponse.json();

                if (!studentsData.success) throw new Error('学生数据API错误: ' + studentsData.message);
                if (!scoreOptionsData.success) throw new Error('评分选项API错误: ' + scoreOptionsData.message);
                if (!groupsData.success) throw new Error('小组数据API错误: ' + groupsData.message);

                students = studentsData.students || [];
                scoreOptions = scoreOptionsData.score_options || [];
                groups = groupsData.groups || [];

                console.log('✅ 从后端加载数据成功:', {
                    students: students.length,
                    scoreOptions: scoreOptions.length,
                    groups: groups.length
                });

                // 渲染学生列表
                renderStudents(students);
                // 更新小组选择框
                updateGroupSelect();
                
                showConnectionStatus('✅ 后端连接正常', 'success');
                
            } catch (error) {
                console.error('❌ 从后端加载数据失败:', error);
                showConnectionStatus('❌ 后端连接失败: ' + error.message, 'error');
                
                // 使用模拟数据作为后备
                await loadMockData();
            }
        }
        
        // 加载模拟数据
        async function loadMockData() {
            console.log('使用模拟数据模式');
            
            students = [
                { id: 1, name: "李小明", total_score: 95, group_name: "第一组", student_id: "S001" },
                { id: 2, name: "张伟", total_score: 88, group_name: "第二组", student_id: "S002" },
                { id: 3, name: "王芳", total_score: 92, group_name: "第一组", student_id: "S003" },
                { id: 4, name: "刘洋", total_score: 78, group_name: "第三组", student_id: "S004" },
                { id: 5, name: "陈静", total_score: 85, group_name: "第二组", student_id: "S005" },
                { id: 6, name: "杨帆", total_score: 90, group_name: "第四组", student_id: "S006" },
                { id: 7, name: "黄磊", total_score: 82, group_name: "第三组", student_id: "S007" },
                { id: 8, name: "周涛", total_score: 96, group_name: "第一组", student_id: "S008" },
                { id: 9, name: "吴倩", total_score: 89, group_name: "第五组", student_id: "S009" },
                { id: 10, name: "郑华", total_score: 91, group_name: "第四组", student_id: "S010" }
            ];
            
            scoreOptions = [
                { id: 1, type: "add", value: 5, reason: "作业优秀" },
                { id: 2, type: "add", value: 3, reason: "课堂表现好" },
                { id: 3, type: "add", value: 2, reason: "帮助同学" },
                { id: 4, type: "subtract", value: 5, reason: "不交作业" },
                { id: 5, type: "subtract", value: 3, reason: "违反纪律" },
                { id: 6, type: "subtract", value: 2, reason: "迟到" }
            ];
            
            groups = [
                { id: 1, name: "第一组", description: "学习小组" },
                { id: 2, name: "第二组", description: "创新小组" },
                { id: 3, name: "第三组", description: "进步小组" },
                { id: 4, name: "第四组", description: "精英小组" },
                { id: 5, name: "第五组", description: "奋进小组" },
                { id: 6, name: "第六组", description: "超越小组" }
            ];
            
            renderStudents(students);
            updateGroupSelect();
        }
        
        // 显示加载状态
        function showLoadingState() {
            const studentsList = document.getElementById('students-list');
            studentsList.innerHTML = `
                <div class="student-row" style="text-align: center; padding: 3rem;">
                    <div style="grid-column: 1 / -1;">
                        <i class="fas fa-spinner fa-spin" style="font-size: 3rem; color: var(--primary); margin-bottom: 1rem;"></i>
                        <p>正在从服务器加载数据...</p>
                    </div>
                </div>
            `;
        }
        
        // 渲染学生列表
        function renderStudents(studentsList) {
            const studentsListElement = document.getElementById('students-list');
            studentsListElement.innerHTML = '';
            
            if (studentsList.length === 0) {
                studentsListElement.innerHTML = `
                    <div class="student-row" style="text-align: center; padding: 3rem;">
                        <div style="grid-column: 1 / -1;">
                            <i class="fas fa-user-slash" style="font-size: 3rem; color: #ccc; margin-bottom: 1rem;"></i>
                            <p>没有找到学生数据</p>
                            <button class="btn btn-primary" onclick="loadDataFromBackend()" style="margin-top: 1rem;">
                                <i class="fas fa-refresh"></i> 重新加载
                            </button>
                        </div>
                    </div>
                `;
                return;
            }
            
            studentsList.forEach(student => {
                const studentRow = document.createElement('div');
                studentRow.className = 'student-row';
                studentRow.innerHTML = `
                    <div class="student-info">
                        <div class="student-avatar">${student.name.charAt(0)}</div>
                        <div class="student-details">
                            <h3>${student.name}</h3>
                            <p>学号: ${student.student_id || '未设置'}</p>
                        </div>
                    </div>
                    <div class="student-score">${student.total_score || 0}</div>
                    <div class="student-group">${student.group_name || '未分组'}</div>
                    <div class="student-actions">
                        <button class="btn-small btn-small-primary edit-student-btn" data-id="${student.id}">
                            <i class="fas fa-edit"></i> 评分
                        </button>
                        <button class="btn-small btn-small-danger delete-student-btn" data-id="${student.id}">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                `;
                
                // 绑定编辑按钮事件
                studentRow.querySelector('.edit-student-btn').addEventListener('click', function(e) {
                    e.stopPropagation(); // 防止触发行点击事件
                    const studentId = parseInt(this.getAttribute('data-id'));
                    const student = students.find(s => s.id === studentId);
                    if (student) {
                        openStudentDetailModal(student);
                    }
                });
                
                // 绑定删除按钮事件
                studentRow.querySelector('.delete-student-btn').addEventListener('click', function(e) {
                    e.stopPropagation(); // 防止触发行点击事件
                    const studentId = parseInt(this.getAttribute('data-id'));
                    const student = students.find(s => s.id === studentId);
                    if (student) {
                        deleteStudent(student);
                    }
                });
                
                // 整行点击事件（打开详情模态框）
                studentRow.addEventListener('click', function() {
                    openStudentDetailModal(student);
                });
                
                studentsListElement.appendChild(studentRow);
            });
        }
        
        // 更新小组选择框
        function updateGroupSelect() {
            const groupSelect = document.getElementById('student-group');
            groupSelect.innerHTML = '<option value="">请选择小组</option>';
            
            groups.forEach(group => {
                const option = document.createElement('option');
                option.value = group.id;
                option.textContent = group.name;
                groupSelect.appendChild(option);
            });
        }
        
        // 打开学生详情模态框
        function openStudentDetailModal(student) {
            currentStudent = student;
            selectedScoreOption = null;
            customScoreValue = 5;
            
            document.getElementById('detail-avatar').textContent = student.name.charAt(0);
            document.getElementById('detail-name').textContent = student.name;
            document.getElementById('detail-group').textContent = student.group_name || '未分组';
            document.getElementById('detail-current-score').textContent = student.total_score || 0;
            document.getElementById('detail-new-score').textContent = student.total_score || 0;
            document.getElementById('detail-score-change').textContent = '+0';
            document.getElementById('detail-score-change').className = 'score-change';
            document.getElementById('custom-score-value').value = customScoreValue;
            document.getElementById('score-reason').value = '';
            
            renderScoreOptions();
            document.getElementById('student-detail-modal').classList.add('active');
        }
        
        // 渲染评分选项
        function renderScoreOptions() {
            const scoreOptionsElement = document.getElementById('score-options');
            scoreOptionsElement.innerHTML = '';
            
            scoreOptions.forEach(option => {
                const optionElement = document.createElement('div');
                optionElement.className = `score-option ${option.type}`;
                optionElement.innerHTML = `
                    <div class="score-value">${option.type === 'add' ? '+' : '-'}${option.value}</div>
                    <div class="score-reason">${option.reason}</div>
                `;
                
                optionElement.addEventListener('click', function() {
                    document.querySelectorAll('.score-option').forEach(el => {
                        el.classList.remove('selected');
                    });
                    
                    this.classList.add('selected');
                    selectedScoreOption = option;
                    updateScoreDisplay();
                });
                
                scoreOptionsElement.appendChild(optionElement);
            });
        }
        
        // 更新分数显示
        function updateScoreDisplay() {
            if (!currentStudent) return;
            
            let change = 0;
            let reason = '';
            
            if (selectedScoreOption) {
                change = selectedScoreOption.type === 'add' ? 
                    selectedScoreOption.value : -selectedScoreOption.value;
                reason = selectedScoreOption.reason;
            }
            
            const newScore = (currentStudent.total_score || 0) + change;
            
            document.getElementById('detail-new-score').textContent = newScore;
            document.getElementById('detail-score-change').textContent = 
                (change > 0 ? '+' : '') + change;
            
            const scoreChangeElement = document.getElementById('detail-score-change');
            if (change > 0) {
                scoreChangeElement.className = 'score-change positive';
            } else if (change < 0) {
                scoreChangeElement.className = 'score-change negative';
            } else {
                scoreChangeElement.className = 'score-change';
            }
            
            if (reason) {
                document.getElementById('score-reason').value = reason;
            }
        }
        
        // 创建学生
        async function handleCreateStudent(studentData) {
            try {
                console.log('创建学生:', studentData);
                
                const response = await fetch(API_BASE_URL + '/api/students', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(studentData)
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '创建失败');
                }
                
                const result = await response.json();
                
                if (result.success) {
                    // 重新加载学生数据
                    await loadDataFromBackend();
                    return result.student;
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('创建学生失败:', error);
                throw error;
            }
        }
        
        // 删除学生
        async function deleteStudent(student) {
            if (!confirm(`确定要删除学生 "${student.name}" 吗？此操作无法撤销。`)) {
                return;
            }
            
            try {
                console.log('删除学生:', student.id);
                
                const response = await fetch(API_BASE_URL + `/api/students/${student.id}`, {
                    method: 'DELETE'
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '删除失败');
                }
                
                const result = await response.json();
                
                if (result.success) {
                    // 从本地数据中移除该学生
                    students = students.filter(s => s.id !== student.id);
                    // 重新渲染学生列表
                    renderStudents(students);
                    alert('学生删除成功！');
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('删除学生失败:', error);
                alert('删除学生失败: ' + error.message);
            }
        }
        
        // 提交分数变更
        async function handleScoreChange(studentId, scoreOptionId, notes) {
            try {
                console.log('提交分数变更:', { studentId, scoreOptionId, notes });
                
                const response = await fetch(API_BASE_URL + `/api/students/${studentId}/scores`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        score_option_id: scoreOptionId,
                        notes: notes
                    })
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '评分失败');
                }
                
                const result = await response.json();
                
                if (result.success) {
                    // 重新加载学生数据
                    await loadDataFromBackend();
                    return result;
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('提交分数变更失败:', error);
                throw error;
            }
        }
        
        // 添加评分选项
        async function handleCreateScoreOption(optionData) {
            try {
                console.log('创建评分选项:', optionData);
                
                const response = await fetch(API_BASE_URL + '/api/score_options', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(optionData)
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '创建失败');
                }
                
                const result = await response.json();
                
                if (result.success) {
                    // 重新加载评分选项
                    const scoreOptionsResponse = await fetch(API_BASE_URL + '/api/score_options');
                    const scoreOptionsData = await scoreOptionsResponse.json();
                    scoreOptions = scoreOptionsData.score_options || [];
                    return result.score_option;
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('创建评分选项失败:', error);
                throw error;
            }
        }
        
        // 删除评分选项
        async function handleDeleteScoreOption(optionId) {
            try {
                console.log('删除评分选项:', optionId);
                
                const response = await fetch(API_BASE_URL + `/api/score_options/${optionId}`, {
                    method: 'DELETE'
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '删除失败');
                }
                
                const result = await response.json();
                
                if (result.success) {
                    // 从本地数据中移除
                    scoreOptions = scoreOptions.filter(option => option.id !== optionId);
                    return true;
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('删除评分选项失败:', error);
                throw error;
            }
        }
        
        // 绑定事件
        function bindEvents() {
            // 模态框控制
            const modals = {
                studentDetail: document.getElementById('student-detail-modal'),
                addStudent: document.getElementById('add-student-modal'),
                manageScoreOptions: document.getElementById('manage-score-options-modal'),
                addScoreOption: document.getElementById('add-score-option-modal'),
                login: document.getElementById('login-modal')
            };
            
            // 打开模态框
            document.getElementById('add-student-btn').addEventListener('click', () => {
                modals.addStudent.classList.add('active');
            });
            
            document.getElementById('manage-score-options-btn').addEventListener('click', () => {
                renderScoreOptionsList();
                modals.manageScoreOptions.classList.add('active');
            });
            
            document.getElementById('add-score-option-btn').addEventListener('click', () => {
                modals.addScoreOption.classList.add('active');
            });
            
            document.getElementById('login-btn').addEventListener('click', () => {
                modals.login.classList.add('active');
            });
            
            // 关闭模态框
            function closeModals() {
                Object.values(modals).forEach(modal => {
                    modal.classList.remove('active');
                });
            }
            
            document.querySelectorAll('.close-modal').forEach(btn => {
                btn.addEventListener('click', closeModals);
            });
            
            window.addEventListener('click', function(e) {
                if (Object.values(modals).some(modal => e.target === modal)) {
                    closeModals();
                }
            });
            
            // 添加学生
            document.getElementById('submit-add-student').addEventListener('click', async function() {
                const name = document.getElementById('student-name').value;
                const groupId = document.getElementById('student-group').value;
                const score = parseInt(document.getElementById('initial-score').value) || 100;
                
                if (!name || !groupId) {
                    alert('请填写学生姓名和选择小组！');
                    return;
                }
                
                const button = this;
                button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 添加中...';
                button.disabled = true;
                
                try {
                    await handleCreateStudent({
                        name: name,
                        group_id: parseInt(groupId),
                        total_score: score,
                        student_id: 'S' + (students.length + 1).toString().padStart(3, '0')
                    });
                    
                    closeModals();
                    document.getElementById('add-student-form').reset();
                    alert(`成功添加学生: ${name}`);
                } catch (error) {
                    alert('添加学生失败: ' + error.message);
                } finally {
                    button.innerHTML = '添加学生';
                    button.disabled = false;
                }
            });
            
            // 提交分数变更
            document.getElementById('submit-score-change').addEventListener('click', async function() {
                if (!currentStudent || !selectedScoreOption) {
                    alert('请选择评分选项！');
                    return;
                }
                
                const notes = document.getElementById('score-reason').value || selectedScoreOption.reason;
                const button = this;
                button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
                button.disabled = true;
                
                try {
                    await handleScoreChange(currentStudent.id, selectedScoreOption.id, notes);
                    closeModals();
                    alert('评分成功！');
                } catch (error) {
                    alert('评分失败: ' + error.message);
                } finally {
                    button.innerHTML = '确认评分';
                    button.disabled = false;
                }
            });
            
            // 添加评分选项
            document.getElementById('submit-add-score-option').addEventListener('click', async function() {
                const type = document.getElementById('option-type').value;
                const value = parseInt(document.getElementById('option-value').value);
                const reason = document.getElementById('option-reason').value;
                
                if (!value || !reason) {
                    alert('请填写分数值和原因！');
                    return;
                }
                
                const button = this;
                button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 添加中...';
                button.disabled = true;
                
                try {
                    await handleCreateScoreOption({ type, value, reason });
                    closeModals();
                    document.getElementById('add-score-option-form').reset();
                    alert('成功添加评分选项！');
                } catch (error) {
                    alert('添加评分选项失败: ' + error.message);
                } finally {
                    button.innerHTML = '添加选项';
                    button.disabled = false;
                }
            });
            
            // 保存评分选项
            document.getElementById('save-score-options').addEventListener('click', function() {
                alert('评分选项设置已保存！');
                closeModals();
            });
            
            // 自定义分数控制
            document.getElementById('custom-subtract').addEventListener('click', function() {
                customScoreValue = Math.max(1, customScoreValue - 1);
                document.getElementById('custom-score-value').value = customScoreValue;
            });
            
            document.getElementById('custom-add').addEventListener('click', function() {
                customScoreValue = Math.min(100, customScoreValue + 1);
                document.getElementById('custom-score-value').value = customScoreValue;
            });
            
            // 应用自定义分数
            document.getElementById('apply-custom-score').addEventListener('click', function() {
                const value = parseInt(document.getElementById('custom-score-value').value) || 5;
                const type = confirm(`请选择评分类型:\n\n确定 = 加分\n取消 = 扣分`) ? 'add' : 'subtract';
                
                selectedScoreOption = {
                    id: 0,
                    type: type,
                    value: value,
                    reason: '自定义评分'
                };
                
                updateScoreDisplay();
                document.querySelectorAll('.score-option').forEach(el => {
                    el.classList.remove('selected');
                });
            });
            
            // 搜索功能
            document.getElementById('search-input').addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const filteredStudents = students.filter(student => 
                    student.name.toLowerCase().includes(searchTerm) ||
                    (student.student_id && student.student_id.toLowerCase().includes(searchTerm))
                );
                renderStudents(filteredStudents);
            });
            
            // 首字母筛选
            document.querySelectorAll('.letter-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.letter-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    const letter = this.getAttribute('data-letter');
                    if (letter === 'all') {
                        renderStudents(students);
                    } else {
                        const filteredStudents = students.filter(student => 
                            student.name.charAt(0) === letter
                        );
                        renderStudents(filteredStudents);
                    }
                });
            });
            
            // 登录功能
            document.getElementById('submit-login').addEventListener('click', async function() {
                const username = document.getElementById('login-username').value;
                const password = document.getElementById('login-password').value;
                
                if (!username || !password) {
                    alert('请填写用户名和密码！');
                    return;
                }
                
                const button = this;
                button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
                button.disabled = true;
                
                try {
                    const response = await fetch(API_BASE_URL + '/api/teacher_login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ username, password })
                    });
                    
                    const result = await response.json();
                    
                    if (result.success) {
                        alert('🎉 登录成功！');
                        closeModals();
                        updateTeacherInterface(result.teacher);
                    } else {
                        alert('登录失败: ' + result.message);
                    }
                } catch (error) {
                    alert('登录失败: ' + error.message);
                } finally {
                    button.innerHTML = '登录';
                    button.disabled = false;
                }
            });
        }
        
        // 渲染评分选项列表
        function renderScoreOptionsList() {
            const scoreOptionsListElement = document.getElementById('score-options-list');
            scoreOptionsListElement.innerHTML = '';
            
            if (scoreOptions.length === 0) {
                scoreOptionsListElement.innerHTML = `
                    <div style="text-align: center; padding: 2rem; color: #666;">
                        <i class="fas fa-cog" style="font-size: 3rem; margin-bottom: 1rem;"></i>
                        <p>暂无评分选项</p>
                    </div>
                `;
                return;
            }
            
            scoreOptions.forEach(option => {
                const optionElement = document.createElement('div');
                optionElement.className = 'student-row';
                optionElement.innerHTML = `
                    <div class="student-info">
                        <div class="student-avatar" style="background: ${option.type === 'add' ? 'var(--accent2)' : 'var(--accent1)'}">
                            ${option.type === 'add' ? '+' : '-'}
                        </div>
                        <div class="student-details">
                            <h3>${option.reason}</h3>
                            <p>${option.type === 'add' ? '加分' : '扣分'}选项</p>
                        </div>
                    </div>
                    <div class="student-score">${option.value}</div>
                    <div class="student-group">${option.type === 'add' ? '加分' : '扣分'}</div>
                    <div class="student-actions">
                        <button class="btn-small btn-small-danger delete-score-option-btn" data-id="${option.id}">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                `;
                
                optionElement.querySelector('.delete-score-option-btn').addEventListener('click', async function() {
                    if (confirm(`确定要删除评分选项 "${option.reason}" 吗？`)) {
                        try {
                            await handleDeleteScoreOption(option.id);
                            renderScoreOptionsList();
                            alert('删除成功！');
                        } catch (error) {
                            alert('删除失败: ' + error.message);
                        }
                    }
                });
                
                scoreOptionsListElement.appendChild(optionElement);
            });
        }
        
        // 更新教师界面
        function updateTeacherInterface(user) {
            document.querySelector('.user-actions').innerHTML = `
                <div class="user-info" style="display: flex; align-items: center; gap: 1rem;">
                    <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                        ${user.username.charAt(0).toUpperCase()}
                    </div>
                    <span style="color: white; font-weight: 500;">${user.username} 老师</span>
                    <button class="btn-auth btn-login" id="logout-btn" style="background: rgba(255,255,255,0.2);">
                        <i class="fas fa-sign-out-alt"></i> 退出
                    </button>
                </div>
            `;
            
            document.getElementById('logout-btn').addEventListener('click', function() {
                if (confirm('确定要退出登录吗？')) {
                    document.querySelector('.user-actions').innerHTML = `
                        <button class="btn-auth btn-login" id="login-btn">
                            <i class="fas fa-sign-in-alt"></i> 教师登录
                        </button>
                    `;
                    document.getElementById('login-btn').addEventListener('click', function() {
                        document.getElementById('login-modal').classList.add('active');
                    });
                    alert('已退出登录');
                }
            });
        }
        
        // 检查登录状态
        function checkLoginStatus() {
            // 简化版登录状态检查
            const teacherData = localStorage.getItem('teacher_data');
            if (teacherData) {
                try {
                    const teacher = JSON.parse(teacherData);
                    updateTeacherInterface(teacher);
                } catch (e) {
                    console.error('读取教师信息失败:', e);
                }
            }
        }
        
        // 显示连接状态
        function showConnectionStatus(message, type) {
            const existingStatus = document.getElementById('connection-status');
            if (existingStatus) {
                existingStatus.remove();
            }
            
            const statusEl = document.createElement('div');
            statusEl.id = 'connection-status';
            statusEl.innerHTML = `
                <div style="
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    padding: 10px 15px;
                    border-radius: 8px;
                    background: ${type === 'success' ? '#4CAF50' : type === 'warning' ? '#FF9800' : '#f44336'};
                    color: white;
                    font-size: 14px;
                    z-index: 1000;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
                ">
                    <i class="fas ${type === 'success' ? 'fa-check' : type === 'warning' ? 'fa-exclamation-triangle' : 'fa-exclamation-circle'}"></i>
                    ${message}
                </div>
            `;
            
            document.body.appendChild(statusEl);
            
            setTimeout(() => {
                if (statusEl.parentNode) {
                    statusEl.remove();
                }
            }, 5000);
        }
        
        // 添加重新加载函数到全局作用域
        window.loadDataFromBackend = loadDataFromBackend;
    </script>
</body>
</html>